<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<button type="add">添加一行li标签</button>
		<button type="down">点击立即下载</button>
		<button type="remove">点击解绑</button>
		<a href="http://www.acfun.cn">acfun</a>
		<a href="javascript:;">死了</a>'
		<hr >	
		
		
		<ul id="list">
			<li>七步诗----曹植</li>
			<li>煮豆燃豆萁，</li>
			<li>豆在釜中泣。</li>
			<li>本是同根生，</li>
			<li>相煎何太急？</li>
			
		</ul>
		
		<form action="1.php">
		    <button type="submit">提交</button>
		</form>
		
		
		<div id="tar">
		    <div id="box1">
		        <div id="box2">
		            <div id="box3">
		                <div id="box4">
		                    <div id="box5"></div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		
		<script type="text/javascript">
			$('#list li').click(function(e)){
				console.log(e);
				console.dir(this);
				console.dir($(this));
				consoled.log($(this).html())
			})
			
			//jq标准绑定
			$('#list li ').bind('clickd',function(){
				alert($(this).html());
			})
			
			//多个事件绑定
			
			$('#list li').bind({
				'mouseover':function(){
				$(this).css('background-color','#999')
			},
			'mouseout':function(){
				$(this).css('background-color','')
				
			},
			});
			
			//单事件
			$('#list li').on('click', function(){
			    alert($(this).html());
			});
			
			//多事件
			
			$('#list li').on({
				'mouseover':function(){
					$(this).css('background-color','#369')
				}
			}
			'mouseout':function(){
				$(this).css('background-color','')
			}
			
			)
			//event
			$('#list').on('mouseover',function(e){
				console.log(e)
				console.log(e.pageX,e.pageY)
				console.log(e.offsetX,e.offsetY)
				
			})
			
			//添加 新元素
			$('#add').click(function(){
				$('<li>啊 真是一首好诗!!</li>').appendTo('#list')
			})
			
			//事件委派
			$(document).on('mouseover','#list li',function(){
				$(this).css('background-color','#foo')
			}).on('mouseout','#list li',function(){
				$(this).css('background0-color','')
			})
			
			//一次性事件
			$('#down').one('click',function(){
				alert('我是好人')
			})
			//解绑
			$('#remove').click(){
				console.log('解绑成功')
			}
			$('#list li').off()//解绑所有li的事件
			
			$('#list li').off('mouseout click');//解绑所有li指定的事件
			$(document).off('mouseout mouseover','#list li')//解绑所有li的事件(委托)
			// 自动触发
			$('#add').trigger('click');
			
			// 阻止默认事件
			$('form').on('submit', false);
			
			$('#ac').click(function (){
			    // 处理逻辑....
			    return false;
			});
			
			// 阻止事件冒泡
			$('div').on('click', function (){
			    $(this).css('background-color', '#000');
			    return false;
			})
		</script>
		
	</body>
</html>
